<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
	    <style>
		    img{
				/*图片脱离文档流--文字包含在图片周边*/
				float:right;
				margin-right: 50px; /*图片与文字链接处间隙*/
				margin-bottom: 50px;/*图片与文字链接处间隙*/
			}	
			p{
				font-size: 16px;/*页面默认字体尺寸*/
				line-height: 20px;/*浮动文字，行高无法设定*/
				word-spacing: 20px;
				
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/3.png" alt="皮卡丘" width="250px" height="250px">
		<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit soluta dicta itaque laborum! Deleniti odit temporibus officia mollitia aperiam consequatur fuga quae! Commodi quos consequatur in quibusdam! Eius, ipsa eos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi itaque explicabo dolorem quisquam veritatis aspernatur impedit placeat pariatur! Totam nemo quis vero laudantium fuga cum recusandae quibusdam neque cumque sit? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi optio amet ducimus. Quidem nisi odit voluptatum delectus expedita in impedit eos, cumque labore beatae doloremque. Repellat quam nobis earum fuga!</p>
	</body>
</html>